<template>
  <div id="main">
    <!-- 图标 -->
    <img class="logo" src="../assets/images/main/logo.png" alt="" />
    <!-- 背景 -->
    <img class="mapOutline" src="../assets/images/jt.png" alt="" />
    <img class="mapImg" src="../assets/images/map.png" alt="" />
    <!-- 网格 -->
    <img class="bgLine" src="../assets/images/line.png" alt="" />
    <div class="header">
      <div class="titleText">
        <h1>
          {{ system.homePageName }}(<span class="customsName">湛江海关</span>)
        </h1>
      </div>
      <div class="showTime">
        <p class="time" ref="time"></p>
        <p>湛江海关风险防控分局</p>
      </div>
      <div class="userMsg">
        <div @click="toUserManage">
          <el-avatar :src="user.avatar?user.avatar:circleUrl"></el-avatar>
          <span>{{ user.userName }}</span>
        </div>
        <span class="loginOut">|</span>
        <span class="loginOut" @click="loginOut">退出</span>
      </div>
    </div>
    <div class="mainbox">
      <div class="subsystem">
        <div
          class="buttonFour"
          v-for="item in subsystem"
          :key="item.systemPageId"
        >
          <img
            slot="reference"
            src="../assets/images/subsystem/deleteSubsystem.png"
            alt=""
            v-if="isDelete"
            @click="deleteSubsystemFun"
            :id="item.systemPageId"
          />
          <img
            src="../assets/images/subsystem/edit.png"
            alt=""
            v-if="isEdit"
            @click="editSubsystemFun"
            :index="item.systemPageId"
          />
          <button
            @click="tosubsystem(item.systemPagePath)"
          >
            <!-- <router-link
              tag="a"
              target="_blank"
              :to="`/${item.homePageId}/${item.systemPagePath}`"
              >{{ item.systemPageName }}</router-link
            > -->
            {{ item.systemPageName }}
          </button>
        </div>
      </div>
      <user-operation
        v-if="isShowUserOpertionLabel"
        :system="system"
        @renewSubsystem="renewSubsystem"
        @showDeleteIcon="showDeleteIcon"
        @showEditIcon="showEditIcon"
      ></user-operation>

      <el-dialog title="编辑" :visible.sync="editParamsFormVisible">
        <el-form :model="editParams">
          <el-form-item label="子系统名称" :label-width="formLabelWidth">
            <el-input v-model="editParams.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="子系统标题" :label-width="formLabelWidth">
            <el-input v-model="editParams.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="子系统路径" :label-width="formLabelWidth">
            <el-input
              v-model="editParams.pathname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editParamsFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
let t = null;

import userOperation from "./userOperation.vue";
import "../assets/css/main.less";
import { request } from "../utils";
export default {
  components: {
    userOperation,
  },
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      user: "",
      system: "",
      subsystem: "",
      // 删除按钮显示flag
      isDelete: false,
      // 编辑按钮显示flag
      isEdit: false,
      // 删除确认按钮flag
      isDeleteComfirm: false,
      // 编辑
      editParams: {
        title: "",
        name: "",
        pathname: "",
      },
      editParamsFormVisible: false,
      formLabelWidth: "120px",
      // 是否展示操作列表flag
      isShowUserOpertionLabel: false,
    };
  },
  watch: {
    "$store.state.user": {
      handler(val) {
        this.user = val;
      },
      deep: true,
    },
    "$store.state.system": {
      handler() {
        this.system = this.$store.getters.getSystemMsg;
        this.subsystem = this.$store.getters.getSubsystem;
      },
    },
  },
  created() {
    // 获取用户信息
    this.getUserInfo();
  },
  mounted() {
    t = setTimeout(this.time, 2000); //開始运行
  },
  methods: {
    // 判断用户身份
    isShowUserOpertion() {
      if (this.user.role.roleCode != "viewer") {
        this.isShowUserOpertionLabel = true;
      }
    },
    time() {
      clearTimeout(t); //清除定时器
      let dt = new Date();
      if (this.$refs.time) {
        this.$refs.time.innerHTML = this.formatDate(dt);
      }
      t = setTimeout(this.time, 1000); //设定定时器，循环运行
    },
    formatDate(time) {
      let dt = time;
      let y = dt.getFullYear();
      let mt = ("0" + (dt.getMonth() + 1)).slice(-2);
      let day = ("0" + dt.getDate()).slice(-2);
      let h = ("0" + dt.getHours()).slice(-2); //获取时
      let m = ("0" + dt.getMinutes()).slice(-2); //获取分
      let s = ("0" + dt.getSeconds()).slice(-2); //获取秒
      return y + "-" + mt + "-" + day + " " + h + ":" + m + ":" + s;
    },
    loginOut() {
      // 清空本地token
      localStorage.setItem("token", ""),
        // 跳到登录页
        this.$router.push({
          name: "login",
        });
    },

    getUserInfo() {
      let ts = this;
      request({
        method: "GET",
        url: ts.portInterface.getUserInfo,
        params: {
          userId: localStorage.getItem("userId"),
        },
      }).then((res) => {
        this.$store.commit("setUserInfo", res.result);
        this.user = res.result;
        this.isShowUserOpertion();
        // 获取系统页面信息
        this.getSystemInfo();
      });
    },
    getSystemInfo() {
      let ts = this;
      request({
        method: "GET",
        url: ts.portInterface.gethomepagelist,
        params: {},
      }).then((res) => {
        ts.system = res.result[0];
        ts.$store.commit("setSystemMsg", res.result[0]);
        // 获取子系统
        this.getSubsystem();
      });
    },
    getSubsystem() {
      let ts = this;
      request({
        method: "GET",
        url: `/public/homepage/${ts.system.homePagePath}/getsystempagelist`,
        params: {},
      }).then((res) => {
        ts.subsystem = res.result;
        this.$store.commit("setSubSytem", res.result);
      });
    },
    // 更新子系统列表
    renewSubsystem() {
      this.getSubsystem();
    },
    // 显示删除子系统按钮
    showDeleteIcon(val) {
      this.isDelete = val;
    },
    // 显示编辑子系统按钮
    showEditIcon(val) {
      this.isEdit = val;
    },
    // 删除子系统
    deleteSubsystemFun(event) {
      console.log("act target", event.target);
      const index = event.target.id;
      console.log(index);
      // 删除子系统函数
      this.deleteSubsystem(index);
    },
    deleteSubsystem(systemPageId) {
      let ts = this;
      ts.$http({
        method: "DELETE",
        url: `/public/homepage/${ts.system.homePagePath}/delsystempage`,
        params: {
          systemPageId: systemPageId,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => {
          console.log("delete subsystem", response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "删除成功,正在更新主页...",
              type: "success",
            });
            this.getSubsystem();
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    // 展示编辑子系统dialog
    editSubsystemFun(event) {
      const index = event.target.getAttribute("index");
      for (const item of this.subsystem) {
        if (item.systemPageId == index) {
          this.editParams.title = item.systemPageTitle;
          this.editParams.name = item.systemPageName;
          this.editParams.pathname = item.systemPagePath;
          break;
        }
      }
      this.editParamsFormVisible = true;
    },
    // 编辑子系统
    edit() {
      this.editParamsFormVisible = false;
      this.editSubmit();
    },
    editSubmit() {
      // console.log()
      let ts = this;
      ts.$http({
        method: "PUT",
        url: `/public/systempage/${ts.editParams.pathname}/updatesystempageinfo`,
        data: {
          systemPageName: ts.editParams.name,
          systemPageTitle: ts.editParams.title,
          systemPagePath: ts.editParams.pathname,
        },
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((response) => {
          console.log(response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "更新子系统成功,正在更新页面...",
              type: "success",
            });
            // 获取子系统列表
            this.getSubsystem();
            // 清空输入框
            this.emptyeditDialog();
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.log(error);
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    emptyeditDialog() {
      this.editParams.title = "";
      this.editParams.name = "";
      this.editParams.pathname = "";
    },
    toUserManage() {
      this.$router.push({ path: "/userManage/personalMsg" });
    },
    tosubsystem(systemPagePath) {
      const subsystems = this.$store.getters.getSubsystem;
      const subInfo = subsystems.find(
        (item) => item.systemPagePath === systemPagePath
      );
      this.$store.commit("setSubSystemInfo", subInfo);

      // 路由
      this.$router.push({
        path: `/subPath/${systemPagePath}`,
        query: {
          // systemPagePath:systemPagePath
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.userMsg {
  height: 100%;
  right: 20px;
  top: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .loginOut {
    padding: 5px;
    padding-bottom: 20px;
  }
  span {
    font-size: 0.25rem;
    color: #208ba8;
  }
}
/deep/.el-popover {
  // visibility: hidden;
  top: 0.5rem;
}
@media screen and (max-width: 1200px) {
  .userMsg {
    span {
      font-size: 0.6rem;
    }
  }
  /deep/.el-popover {
    top: 1.2rem;
  }
}
</style>
